<template>
    <MyRowForm :gutter="16">
        <MyColFormItem :span="6" :label="TableLabel.ShopCode + ': '">
            <el-input v-model="table.selectParams.ShopCode" :placeholder="'请输入' + TableLabel.ShopCode" clearable></el-input>
        </MyColFormItem>
        <MyColFormItem :span="6" :label="TableLabel.ShopName + ': '">
            <el-input v-model="table.selectParams.ShopName" :placeholder="'请输入' + TableLabel.ShopName" clearable></el-input>
        </MyColFormItem>
        <MyColFormItem v-if="reportType === ReportLabel.日报表" :span="6" :label="TableLabel.Ymd + ': '">
            <el-date-picker v-model="(table.selectParams as types.SelectDailyParams).Ymd" type="date"
                :placeholder="'请选择' + TableLabel.Ymd" value-format="YYYY-MM-DD" />
        </MyColFormItem>
        <MyColFormItem v-if="reportType === ReportLabel.月报表" :span="6" :label="TableLabel.DataMonth + ': '">
            <el-date-picker v-model="(table.selectParams as types.SelectMonthlyParams).DataMonth" type="month"
                :placeholder="'请选择' + TableLabel.DataMonth" value-format="YYYY-MM" />
        </MyColFormItem>
        <MyColFormItem :span="9" :label="TableLabel.Range + ': '">
            <el-date-picker v-model="table.selectParams.Range" type="datetimerange" :unlink-panels="true"
                value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" start-placeholder="开始时间"
                end-placeholder="结束时间"></el-date-picker>
        </MyColFormItem>
        <MyColFormItem style="text-align: end;">
            <template #col>
                <el-button type="success" @click="Select">查询</el-button>
                <el-button type="warning" @click="Reset">重置</el-button>
            </template>
        </MyColFormItem>
    </MyRowForm>

    <div class="content">
        <MyTable v-bind="MyTableConfig" :serial="(table.selectParams.Page - 1) * table.selectParams.PageSize + 1"
            v-autoHeight="55"></MyTable>
    </div>

    <div class="footer">
        <MyPagination :total="table.total" v-model:page-size="table.selectParams.PageSize"
            v-model:current-page="table.selectParams.Page" @change="Select"></MyPagination>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from "vue";
import { MyTable, MyPagination, MyRowForm, MyColFormItem, MyTableType, ColumnsType } from "@/components"
import { ReportRecordApi } from "@/api/order_manager/report_record"
import * as types from "./types"
import { TableLabel, ReportLabel } from "./ConfigData"
import { PaginationParams, shortcuts } from "@/library/common";
import { useMainLoading } from "@/hooks/useMainLoading"
import { AbortApi } from "@/library/utils/request"

type ParamsType = types.SelectDailyParams | types.SelectMonthlyParams | types.SelectTotalParams
type SelectApiType = ReturnType<typeof ReportRecordApi.SelectDaily> | ReturnType<typeof ReportRecordApi.SelectMonthly> | ReturnType<typeof ReportRecordApi.SelectTotal>

const props = defineProps<{
    selectApiUrl: string
    selectApi: (params: ParamsType) => SelectApiType
    tableColumns: ColumnsType[]
    reportType: ReportLabel
}>()

const { openMainLoading, closeMainLoading } = useMainLoading()

const initForm: ParamsType = { ...PaginationParams }
const table = reactive({
    selectParams: { ...initForm },
    total: 0,
})

const MyTableConfig = reactive<MyTableType>({
    loading: false,
    table: {
        data: []
    },
    columns: props.tableColumns
})

const Select = async () => {
    MyTableConfig.loading = true

    try {
        const { Data } = await props.selectApi(table.selectParams)
        MyTableConfig.table.data = Data.Data
        table.total = Data.Count
    }
    catch (error) { }
    finally {
        MyTableConfig.loading = false
    }
}

const Reset = () => {
    table.selectParams = { ...initForm }
}

onMounted(async () => {
    openMainLoading()
    await Select()
    closeMainLoading()
})

onUnmounted(() => {
    AbortApi(props.selectApiUrl)
})

</script>

<style lang="scss" scoped>
.content {
    padding-top: 20px;
}

.footer {
    padding: 20px 0;
}
</style>